<template>
   <div id="Map" :style="styleBase">
 
   </div>
</template>
 
<script>
import configData from 'api/json/custom_map_config.json'
import axios from 'axios'
const d3_dsv = require('d3-dsv')
export default {
   name: 'Map',
   props: {
       base: {
           type: Object,
       },
       mapSelectName: {
           type: String
       },
       mapSelectNames: {
           type: Array
       },
   },
   computed: {
       styleBase() {
           return {
               width: this.base.width+"px",
               height: this.base.height+"px",
           }
       },
   },
   components: {
   },
   methods: {

   },
   watch: {
       //选中单个博物馆
       mapSelectName(name) {
           if(name == '') {
                this.marker[this.lastIndex].setContent(`<a href='javascript:void(0);' style='text-decoration : none;color:#000000;height:'25px',width:'19px',><img src=${this.logo2} height='19px' width='19px' /></a>`, //为lable填写内容
                        {offset:new BMap.Size(-10,-26),                  //label的偏移量，为了让label的中心显示在点上
                        position:new BMap.Point(this.loactionIng,this.loactionlat)})
                return
           }
           //console.log("桑基图选中的名字是",name)
           let index = this.nameIndexMap[name]
           this.lastIndex = index;
           this.loactionIng = this.geoPositionMap[name].lng
           this.loactionlat = this.geoPositionMap[name].lat
           this.map.centerAndZoom(new BMap.Point(this.loactionIng,this.loactionlat),12)

            this.marker[index].setContent(`<a href='javascript:void(0);' style='text-decoration : none;color:#000000;height:'25px',width:'19px',><img src=${this.logo1} height='25px' width='25px' /></a>`, //为lable填写内容
                        {offset:new BMap.Size(-10,-26),                  //label的偏移量，为了让label的中心显示在点上
                        position:new BMap.Point(this.loactionIng,this.loactionlat)})

       },
        //选中多个博物馆
       mapSelectNames(names) {
           if(names.length == 0) {
                for(let i = 0 ; i < this.lastIndexs.length; ++i) {

                        this.marker[this.lastIndexs[i]].setContent(`<a href='javascript:void(0);' style='text-decoration : none;color:#000000;height:'25px',width:'19px',><img src=${this.logo2} height='19px' width='19px' /></a>`, //为lable填写内容
                                {offset:new BMap.Size(-10,-26),                  //label的偏移量，为了让label的中心显示在点上
                                position:new BMap.Point(this.loactionIngs[i],this.loactionlats[i])})

                }
                return 
           }
           this.lastIndexs = []
           this.map.centerAndZoom(new BMap.Point(this.geoPositionMap[names[0]].lng,this.geoPositionMap[names[0]].lat),12)
           for(let i = 0 ; i <names.length; ++i) {
               let index = this.nameIndexMap[names[i]]
               
                this.marker[index].setContent(`<a href='javascript:void(0);' style='text-decoration : none;color:#000000;height:'25px',width:'19px',><img src=${this.logo1} height='25px' width='25px' /></a>`, //为lable填写内容
                        {offset:new BMap.Size(-10,-26),                  //label的偏移量，为了让label的中心显示在点上
                        position:new BMap.Point(this.geoPositionMap[names[i]].lng,this.geoPositionMap[names[i]].lat)})

                this.loactionIngs.push(this.geoPositionMap[names[i]].lng)
                this.loactionlats.push(this.geoPositionMap[names[i]].lat)
                this.lastIndexs.push(index)
           }
       },
   },
   data () {
       return {
           logo2: require('assets/img/logo2.png'),
           logo1: require('assets/img/logo.png'),
           map: null,
           marker: null,
           nameIndexMap: {},
           geoPositionMap: {},
           lastIndex: 0,
           loactionIng:0,
           loactionlat:0,
           lastIndexs: [],
           loactionlats:[],
           loactionIngs:[],
       }
   },
   mounted() {
       //console.log(this.base)
        this.map = new BMap.Map("Map");          // 创建地图实例  
        // 设置点坐标
        let point = new BMap.Point(112.434468,34.663041);
        // 创建点坐标 
        this.map.centerAndZoom(point, 12);
        // 初始化地图，设置中心点坐标和地图级别 
        this.map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

        this.map.setMapStyle({
               styleJson:configData
        });
        let opts = {type: BMAP_NAVIGATION_CONTROL_SMALL}    
        this.map.addControl(new BMap.NavigationControl(opts));
        this.map.addControl(new BMap.OverviewMapControl());   
        
        axios.get("./dataMap.csv").then(res=>{
            let data = d3_dsv.csvParse(res.data)
            let point = new Array();
            this.marker = new Array();
            let info = new Array();
            let polygon = new Array();
            let searchInfoWindow = new Array();
            for (let i=0;i<data.length;i++)
            {
                this.nameIndexMap[data[i].ChinaName] = i
                point[i] = new BMap.Point(data[i].longitude,data[i].dimensionality);
                this.geoPositionMap[data[i].ChinaName] = point[i];
                this.marker[i] = new BMap.Label(`<a href='javascript:void(0);' style='text-decoration : none;color:#000000;height:'25px',width:'19px',><img src=${this.logo2} height='19px' width='19px' /></a>`, //为lable填写内容
                        {offset:new BMap.Size(-10,-26),                  //label的偏移量，为了让label的中心显示在点上
                        position:point[i]}); 

                this.marker[i].setStyle({
                    fontSize:"16px",                 //字号
                    border:"0",                      //边
                    height:"25px",                   //高度
                    width:"19px",                    //宽
                    textAlign:"center",              //文字水平居中显示
                    backgroundColor: "transparent",    //背景图片
                });
                this.map.addOverlay(this.marker[i]); 

                //搜索窗口的创建
                searchInfoWindow[i] = new BMapLib.SearchInfoWindow(this.map,
                        data[i].Info, {
                            title : data[i].ChinaName, //标题
                            width : 193, //宽度
                            height : 70, //高度
                            panel : "panel", //检索结果面板
                            enableAutoPan : true, //自动平移
                            enableSendToPhone: false,//禁用发送到手机
                            offset:new BMap.Size(0,24),//设置偏移位置
                            searchTypes : [ 
                                BMAPLIB_TAB_TO_HERE, //到这里去
                                BMAPLIB_TAB_FROM_HERE //从这里出发
                            ]
                        });
                    //为lable添加点击事件
                let that = this
                this.marker[i].addEventListener("mouseover",function(event){
                    that.$emit("mapSelectMethod",data[i].ChinaName)
                })
                this.marker[i].addEventListener("mouseout",function(event){
                    that.$emit("mapSelectMethod","")
                })
                this.marker[i].addEventListener("click", (function(k,that,data) {
                    // js 闭包
                    return function() {
                        that.$emit("mapSelectMethod",data[k].ChinaName)
                        searchInfoWindow[k].open(new BMap.Point(data[k].longitude,data[k].dimensionality));
                    };
                })(i,that,data)); 

            }

        })
        
        //添加带有定位的导航控件
        var navigationControl = new BMap.NavigationControl({
            // 靠左上角位置
            anchor: BMAP_ANCHOR_TOP_LEFT,
            // LARGE类型
            type: BMAP_NAVIGATION_CONTROL_SMALL,
            // 启用显示定位
            enableGeolocation: true
        });
        this.map.addControl(navigationControl);

   },
}
</script>
 
<style>
.anchorBL{
   display:none
}
</style>